<template>
  <div class="creatHomeWork">
    <div class="header">
      <span>作业名称：</span>
      <el-input
        style="width:500px"
        v-model="input"
        placeholder="请输入作业名称"
      ></el-input>
    </div>
    <div class="desc">
      <div>作业描述：</div>
      <el-input
        type="textarea"
        :autosize="{ minRows: 10, maxRows: 30 }"
        placeholder="请输入作业描述"
        v-model="textarea"
        style="marginTop : 20px"
      >
      </el-input>
    </div>
    <div class="input">
      <div class="inputLeft">上传输入文件：</div>
      <div>
        <uploadFile :fileList="inputFile" :file.sync="inputfile"></uploadFile>
      </div>
    </div>
    <div class="input">
      <div class="inputLeft">上传输出文件：</div>
      <div>
        <uploadFile :fileList="outputFile" :file.sync="outputfile"></uploadFile>
      </div>
    </div>
    <div class="publish">
      <el-button type="primary" round @click="pulish">确认发布</el-button>
    </div>
  </div>
</template>

<script>
import uploadFile from './uploadFile.vue'
export default {
  name: 'creatHomeWork',
  components: {
    uploadFile,
  },
  data() {
    return {
      input: null,
      textarea: null,
      inputFile: this.homeworkData
        ? [
            {
              name: this.homeworkData.input_file,
              url: this.homeworkData.input_file,
            },
          ]
        : [],
      outputFile: this.homeworkData
        ? [
            {
              name: this.homeworkData.input_file,
              url: this.homeworkData.input_file,
            },
          ]
        : [],
      inputfile: {},
      outputfile: {},
    }
  },
  computed: {
    homeworkData() {
      return this.$store.state.homeworkData ?? null
    },
  },
  watch: {
    homeworkData() {
      this.input = this.homeworkData?.name || ''
      this.textarea = this.homeworkData?.description || ''
      this.inputFile = this.homeworkData
        ? [
            {
              name: this.homeworkData.input_file,
              url: this.homeworkData.input_file,
            },
          ]
        : []
      this.outputFile = this.homeworkData
        ? [
            {
              name: this.homeworkData.input_file,
              url: this.homeworkData.input_file,
            },
          ]
        : []
    },
  },
  methods: {
    pulish() {
      if (this.$route.query.isNew) {
        const formData = new FormData()
        formData.append('name', this.input)
        formData.append('key', this.$route.query.chapterKey)
        formData.append('description', this.textarea)
        formData.append('input_file', this.inputfile)
        formData.append('output_file', this.outputfile)
        this.axios.post('/assess/new_work/', formData).then(res => {
          location.reload() //  到pulishhomework页面
        })
      } else {
        const formData = new FormData()
        formData.append('name', this.input)
        formData.append('key', this.$route.query.chapterKey)
        formData.append('description', this.textarea)
        formData.append('work_key', this.$route.query.key)
        if (this.inputfile instanceof File) {
          formData.append('input_file', this.inputfile)
        }
        if (this.outputfile instanceof File) {
          formData.append('output_file', this.outputfile)
        }
        this.axios.post('/assess/modify_work/', formData).then(res => {
          location.reload() //  到pulishhomework页面
        })
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.uploadFile {
  width: 300px;
}
.creatHomeWork {
  padding: 20px;
  font-size: 20px;
  .header {
    margin-bottom: 20px;
  }
  .input {
    display: flex;
    padding: 20px 0;
    .inputLeft {
      margin-right: 30px;
    }
  }
  .publish {
    display: flex;
    justify-content: center;
  }
}
</style>
